@use './variables' as *;

// 悬停透明度效果
@mixin hover-opacity {
  transition: opacity 0.3s;
  &:hover {
    opacity: 0.8;
  }
}

// 文本省略号
@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 文本相关
@mixin text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@mixin multi-ellipsis($lines) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
}

// 交互相关
@mixin hover-opacity($opacity: 0.8) {
  transition: opacity 0.3s;
  &:hover {
    opacity: $opacity;
  }
}

@mixin hover-scale($scale: 1.05) {
  transition: transform 0.3s;
  &:hover {
    transform: scale($scale);
  }
}

// 布局相关
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 响应式
@mixin responsive($breakpoint) {
  @if $breakpoint == xs {
    @media (max-width: $screen-xs) {
      @content;
    }
  } @else if $breakpoint == sm {
    @media (min-width: $screen-sm) {
      @content;
    }
  } @else if $breakpoint == md {
    @media (min-width: $screen-md) {
      @content;
    }
  } @else if $breakpoint == lg {
    @media (min-width: $screen-lg) {
      @content;
    }
  } @else if $breakpoint == xl {
    @media (min-width: $screen-xl) {
      @content;
    }
  } @else if $breakpoint == xxl {
    @media (min-width: $screen-xxl) {
      @content;
    }
  }
}

// 阴影效果
@mixin box-shadow($level: 1) {
  @if $level == 1 {
    box-shadow: var(--shadow-1);
  } @else if $level == 2 {
    box-shadow: var(--shadow-2);
  } @else if $level == 3 {
    box-shadow: var(--shadow-3);
  }
}

// 渐变背景
@mixin gradient($direction: to right, $start-color: var(--primary-color), $end-color: var(--info-color)) {
  background: linear-gradient($direction, $start-color, $end-color);
}

// 毛玻璃效果
@mixin glass-effect($blur: 10px, $bg-color: rgba(255, 255, 255, 0.1)) {
  backdrop-filter: blur($blur);
  background-color: $bg-color;
}

// 边框
@mixin border($color: var(--border-color), $width: 1px, $style: solid) {
  border: $width $style $color;
}

@mixin border-radius($radius: var(--border-radius-base)) {
  border-radius: $radius;
}

// 动画过渡
@mixin transition($properties: all, $duration: 0.3s, $timing: ease-in-out) {
  transition: $properties $duration $timing;
}

// 按钮样式
@mixin button-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-md);
  height: 32px;
  font-size: var(--font-size-base);
  border-radius: var(--border-radius-base);
  cursor: pointer;
  @include transition;
  
  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

// 卡片样式
@mixin card-base {
  background: #fff;
  border-radius: var(--border-radius-base);
  @include box-shadow(1);
}

// 输入框样式
@mixin input-base {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-base);
  font-size: var(--font-size-base);
  line-height: 1.5;
  @include transition(border-color);
  
  &:focus {
    outline: none;
    border-color: var(--primary-color);
  }
  
  &::placeholder {
    color: var(--text-color-secondary);
  }
}